import React from 'react';
// 在react中 想要更新视图 需要调用 setState这个方法
// setState 在大部分的情况下 是一个异步的操作 （在原生事件中 setState 就是一个同步操作）
class Counter extends React.Component {
  state = {
    count:100,
    name:"zhufneg"
  }
  add(){
    // this.state.count++
    // console.log(this.state.count  )
    // let n = this.state.count + 1
    // this.setState({
    //   count: n
    // },function(){
    //   // 当数据更新之后会触发这个函数
    //   console.log(this.state.count)
    // })

    // this.state.count ++;
    // this.setState({})

    this.setState({count: ++this.state.count})
    this.setState({count: ++this.state.count})
    this.setState({count: ++this.state.count})
  }
  minus(){
    this.state.count--
  }
  render() {
    // render中永远不要触发 setState; 这是一个死循环
    // this.setState({})
    let { count,name } = this.state;
    console.log('render',count)
    return <div className=''>
      <h1>{name}当前数字是{count}</h1>
      {/* react 中的事件绑定 都是  on事件名(驼峰命名) = {对应的函数体} */}
      <button onClick={()=>{this.add()}}>+</button>
      <button onClick={()=>{this.minus()}}>-</button>
    </div>;
  }
}
export default Counter